<!-- prettier-ignore -->
<template>
  <el-dialog :visible.sync="dialogVisible" title="分词结果" width="30%">
    <p>本次任务共分词XX条，耗时XX秒，分词成功率为XX。</p>
    <div id="resultEcharts"></div>
  </el-dialog>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'taskDetail',
  props:{
    detailShow:{
      type:Boolean,
      default:true
    }
  },
  computed:{
    dialogVisible:{
      get(){
        if (this.detailShow){
          this.$nextTick(()=>{
            this.initEcharts()
          })
        }
        return this.detailShow
      },
      set(val){
        this.$emit('update:dialogShow',val)
      }
    }
  },
  methods:{
    initEcharts(){
      let chartDom = document.getElementById('resultEcharts');
      let myChart = echarts.init(chartDom);
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: 'AI补充' },
              { value: 735, name: '未AI补充' },
            ]
          }
        ]
      };

      option && myChart.setOption(option);
    }
  }
};
</script>

<style scoped lang="less">
#resultEcharts{
  height: 200px
}
</style>